<template>
  <div id="echarts4"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  props: ['data'],
  data() {
    return {}
  },
  mounted() {
    this.initEcharts()
  },
  methods: {
    initEcharts() {
      const chartDom = document.getElementById('echarts4')
      this.myChart = echarts.init(chartDom)
    },

    setEChartsOptions(data, labels){
      let formatData1=data.map(item => {
          return (item.item_1*100)
      })
      let formatData2=data.map(item => {
        return (item.item_2*100)
      })
      let formatData3=data.map(item => {
        return (item.item_3*100)
      })
      let formatData4=data.map(item => {
        return (item.item_more*100)
      })
      let option
      option = {
        tooltip: {
          trigger: 'axis'
        },

        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        legend: {
          data: ['0-1天', '1-2天', '2-3天', '大于3天']
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: labels,
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            interval: 'auto',
            formatter: '{value} %'//纵坐标百分比
          },
          name: "关单率",
          nameTextStyle: {
            color: "#aaa",
            nameLocation: "start",
          },
        },
        series: [
          {
            name: '0-1天',
            itemStyle : { normal: {label : {show: true}}},
            type: 'line',
            // stack: 'Total',
            data: formatData1
          },
          {
            name: '1-2天',
            itemStyle : { normal: {label : {show: true}}},
            type: 'line',
            data: formatData2
          },
          {
            name: '2-3天',
            itemStyle : { normal: {label : {show: true}}},
            type: 'line',
            data: formatData3
          },
          {
            name: '大于3天',
            itemStyle : { normal: {label : {show: true}}},
            type: 'line',
            data: formatData4
          },
        ]
      };

      this.myChart && this.myChart.setOption(option);
    },
  },
  watch: {
    data({data, labels}) {
      this.setEChartsOptions(data, labels)
    }
  }
}
</script>

<style scoped>
#echarts4 {
  width: 100%;
  height: 500px;
}
</style>
